<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <TopNav></TopNav>
    <!-- Parallax Section -->
    <section>
      <img src="@/assets/ShiChaBlack/stars.png" id="starts" alt="Stars" />
      <img src="@/assets/ShiChaBlack/moon.png" id="moon" alt="Moon" />
      <img src="@/assets/ShiChaBlack/mountains_behind.png" id="mountains_behind" alt="Mountains Behind" />
      <h2 id="text" style="user-select: none;">Here is the About Page</h2>
      <a href="#sec" id="bth" style="user-select: none;">Explore</a>
      <img src="@/assets/ShiChaBlack/mountains_front.png" id="mountains_front" alt="Mountains Front" />
    </section>

    <!-- Content Section -->
    <div class="sec" id="sec">
      <span class="title" style="text-align: center; text-shadow: 8px 16px 10px black; user-select: none;">
        <TextHover text="Just do it!"></TextHover>
      </span>
      <div class="about-page">
    <!-- 系统名称和简介 -->
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <el-icon><info-filled /></el-icon>
          <span>关于智柜</span>
        </div>
      </template>
      <div class="about-content">
        <p style="color: black;">
          <strong>智柜</strong> 是一款基于STM32的高校智能快递柜系统，旨在为高校师生提供便捷、安全的快递存取服务。
        </p>
        <p style="color: black;">
          系统通过智能化的管理方式，解决了传统快递柜取件流程繁琐、安全性低等问题，提升了用户体验和管理效率。
        </p>
      </div>
    </el-card>

    <!-- 技术栈 -->
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <el-icon><cpu /></el-icon>
          <span>技术栈</span>
        </div>
      </template>
      <div class="about-content">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="硬件平台">
            STM32微控制器
          </el-descriptions-item>
          <el-descriptions-item label="通信模块">
            ESP8266 WiFi模块
          </el-descriptions-item>
          <el-descriptions-item label="前端技术">
            Vue 3 + Element Plus
          </el-descriptions-item>
          <el-descriptions-item label="后端技术">
            Node.js + Express + MySQL
          </el-descriptions-item>
          <el-descriptions-item label="其他工具">
            Keil uVision、VS Code、Git
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 开发团队 -->
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <el-icon><user-filled /></el-icon>
          <span>开发团队</span>
        </div>
      </template>
      <div class="about-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="项目经理">
            {{ me }}
          </el-descriptions-item>
          <el-descriptions-item label="硬件开发">
            {{ me }}
          </el-descriptions-item>
          <el-descriptions-item label="前端开发">
            {{ me }}
          </el-descriptions-item>
          <el-descriptions-item label="后端开发">
            {{ me }}
          </el-descriptions-item>
          <el-descriptions-item label="测试工程师">
            {{ me }}
          </el-descriptions-item>
          <el-descriptions-item label="UI/UX">
            {{ me }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 版权声明 -->
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <span>© 版权声明</span>
        </div>
      </template>
      <div class="about-content">
        <p style="color: black;">
          &copy; 2025 智柜团队 版权所有
        </p>
        <p style="color: black;">
          联系我们：<a href="mailto:support@zhigui.com">fengyunion@qq.com</a>
        </p>
      </div>
    </el-card>
  </div>
    </div>
  </div>
</template>

<script>
import TopNav from '@/components/TopNav'
import TextHover from './common/TextHover.vue'

import {
  InfoFilled,
  Cpu,
  UserFilled
} from '@element-plus/icons-vue'

export default {
  
  components: {
    InfoFilled,
    Cpu,
    UserFilled,
    TopNav,
    TextHover
  },

  mounted()
  {
    this.setupParallax()
  },
  methods: {
    setupParallax()
    {
      const starts = document.getElementById('starts')
      const moon = document.getElementById('moon')
      const mountainsBehind = document.getElementById('mountains_behind')
      const text = document.getElementById('text')
      const bth = document.getElementById('bth')
      const mountainsFront = document.getElementById('mountains_front')

      window.addEventListener('scroll', () =>
      {
        const value = window.scrollY
        starts.style.left = value * 0.25 + 'px'
        moon.style.top = value * 1.05 + 'px'
        mountainsBehind.style.top = value * 0.5 + 'px'
        mountainsFront.style.top = value * 0 + 'px'
        text.style.marginRight = value * 2.5 + 'px'
        text.style.marginTop = value * 1.5 + 'px'
        bth.style.marginTop = value * 1.5 + 'px'
      })
    }
  },

  data()
  {
    return {
      me: '聂文杰'
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans SC", sans-serif;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(#2b1055, #7597de);
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #36256a;
}

section::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #1c0522, transparent);
  z-index: 100;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

section img#moon {
  mix-blend-mode: screen;
}

section img#mountains_front {
  z-index: 10;
}

#text {
  position: absolute;
  right: -180px;
  color: #fff;
  white-space: nowrap;
  font-size: 7.5vw;
  z-index: 9;
}

#bth {
  text-decoration: none;
  padding: 8px 30px;
  border-radius: 40px;
  background: #fff;
  color: #2b1055;
  font-size: 1.5em;
  transform: translateY(100px);
}

.sec {
  position: relative;
  padding: 100px;
  background: #1c0522;
}

.sec h2 {
  font-size: 3.5em;
  margin-bottom: 10px;
  color: #fff;
}

.sec p {
  font-size: 1em;
  color: #fff;
}

.about-page {
  max-width: 800px;
  margin: 12vh auto 0 auto;
  padding: 20px;
  user-select: none;
}

.about-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.card-header .el-icon {
  margin-right: 10px;
}

.about-content {
  line-height: 1.8;
}

.about-content p {
  margin: 10px 0;
}

.about-content a {
  color: #409eff;
  text-decoration: none;
}

.about-content a:hover {
  text-decoration: underline;
}
</style>
